<template>
  <view class="trust-branch-story">
    <!-- 剧情头部 -->
    <view class="story-header">
      <text class="story-title">{{ currentStory.title }}</text>
      <text class="story-subtitle">{{ currentStory.subtitle }}</text>
    </view>

    <!-- 剧情内容 -->
    <view class="story-content">
      <view class="story-text">
        <text class="story-paragraph">{{ currentStory.content }}</text>
      </view>
      
      <!-- 剧情角色 -->
      <view class="story-character" v-if="currentStory.character">
        <view class="character-avatar">
          <text class="character-icon">{{ currentStory.character.icon }}</text>
        </view>
        <view class="character-info">
          <text class="character-name">{{ currentStory.character.name }}</text>
          <text class="character-desc">{{ currentStory.character.description }}</text>
        </view>
      </view>
    </view>

    <!-- 信任分支选择 -->
    <view class="trust-branches" v-if="currentStory.branches && currentStory.branches.length > 0">
      <text class="branches-title">选择你的行动</text>
      <view class="branches-list">
        <view 
          class="branch-item" 
          v-for="(branch, index) in currentStory.branches" 
          :key="branch.id"
          :class="{ 
            selected: selectedBranch === branch.id,
            disabled: !canSelectBranch(branch)
          }"
          @click="selectBranch(branch)"
        >
          <view class="branch-header">
            <text class="branch-icon">{{ branch.icon }}</text>
            <text class="branch-title">{{ branch.title }}</text>
            <view class="branch-trust-impact" :class="getTrustImpactClass(branch.trustImpact)">
              <text class="impact-text">{{ getTrustImpactText(branch.trustImpact) }}</text>
            </view>
          </view>
          
          <view class="branch-content">
            <text class="branch-description">{{ branch.description }}</text>
          </view>
          
          <view class="branch-requirements" v-if="branch.requirements">
            <text class="requirements-title">要求</text>
            <view class="requirements-list">
              <view 
                class="requirement-item" 
                v-for="req in branch.requirements" 
                :key="req.type"
                :class="{ satisfied: isRequirementSatisfied(req) }"
              >
                <text class="requirement-icon">{{ getRequirementIcon(req.type) }}</text>
                <text class="requirement-text">{{ getRequirementText(req) }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 剧情结果 -->
    <view class="story-result" v-if="showResult">
      <view class="result-content">
        <text class="result-title">{{ resultData.title }}</text>
        <text class="result-text">{{ resultData.content }}</text>
        
        <view class="result-effects" v-if="resultData.effects">
          <text class="effects-title">影响</text>
          <view class="effects-list">
            <view 
              class="effect-item" 
              v-for="effect in resultData.effects" 
              :key="effect.id"
            >
              <text class="effect-icon">{{ effect.icon }}</text>
              <text class="effect-text">{{ effect.description }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 剧情进度 -->
    <view class="story-progress">
      <view class="progress-bar">
        <view 
          class="progress-fill" 
          :style="{ width: storyProgress + '%' }"
        ></view>
      </view>
      <text class="progress-text">{{ currentStep }}/{{ totalSteps }}</text>
    </view>

    <!-- 操作按钮 -->
    <view class="story-actions">
      <button 
        class="action-btn continue" 
        @click="continueStory"
        :disabled="!canContinue"
      >
        <text class="btn-text">{{ getContinueText() }}</text>
      </button>
      
      <button 
        class="action-btn restart" 
        @click="restartStory"
        v-if="showRestartButton"
      >
        <text class="btn-text">重新开始</text>
      </button>
    </view>

    <!-- 信任状态显示 -->
    <view class="trust-status-display">
      <view class="status-item">
        <text class="status-label">当前信任值</text>
        <text class="status-value">{{ currentTrustValue }}</text>
      </view>
      <view class="status-item">
        <text class="status-label">信任等级</text>
        <text class="status-value" :class="getTrustLevelClass()">{{ getTrustLevelText() }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import trustCardManager from '@/utils/trust-card-manager.js'

export default {
  name: 'TrustBranchStory',
  props: {
    storyData: {
      type: Object,
      required: true
    },
    initialTrustValue: {
      type: Number,
      default: 50
    }
  },
  
  data() {
    return {
      currentStep: 1,
      currentStory: {},
      selectedBranch: null,
      showResult: false,
      resultData: {},
      currentTrustValue: 50,
      storyHistory: [],
      showRestartButton: false
    }
  },
  
  computed: {
    totalSteps() {
      return this.storyData.steps ? this.storyData.steps.length : 1
    },
    
    storyProgress() {
      return (this.currentStep / this.totalSteps) * 100
    },
    
    canContinue() {
      if (this.showResult) return true
      if (this.currentStory.branches && this.currentStory.branches.length > 0) {
        return this.selectedBranch !== null
      }
      return true
    }
  },
  
  onLoad() {
    this.initializeStory()
  },
  
  methods: {
    // 初始化剧情
    initializeStory() {
      this.currentTrustValue = this.initialTrustValue
      this.currentStep = 1
      this.storyHistory = []
      this.loadCurrentStory()
    },
    
    // 加载当前剧情
    loadCurrentStory() {
      if (this.storyData.steps && this.storyData.steps[this.currentStep - 1]) {
        this.currentStory = this.storyData.steps[this.currentStep - 1]
      } else {
        this.currentStory = this.storyData
      }
      
      this.selectedBranch = null
      this.showResult = false
    },
    
    // 选择分支
    selectBranch(branch) {
      if (!this.canSelectBranch(branch)) return
      
      this.selectedBranch = branch.id
      
      // 记录选择
      this.storyHistory.push({
        step: this.currentStep,
        branch: branch,
        trustValue: this.currentTrustValue
      })
      
      // 触发选择事件
      this.$emit('branch-selected', {
        branch: branch,
        step: this.currentStep,
        trustValue: this.currentTrustValue
      })
    },
    
    // 检查是否可以选择分支
    canSelectBranch(branch) {
      if (!branch.requirements) return true
      
      return branch.requirements.every(req => this.isRequirementSatisfied(req))
    },
    
    // 检查要求是否满足
    isRequirementSatisfied(requirement) {
      switch (requirement.type) {
        case 'trustLevel':
          return this.getTrustLevel() >= requirement.value
        case 'trustValue':
          return this.currentTrustValue >= requirement.value
        case 'previousChoice':
          return this.hasPreviousChoice(requirement.choiceId)
        case 'item':
          return this.hasItem(requirement.itemId)
        default:
          return true
      }
    },
    
    // 获取信任等级
    getTrustLevel() {
      if (this.currentTrustValue >= 80) return 'high'
      if (this.currentTrustValue >= 50) return 'medium'
      if (this.currentTrustValue >= 20) return 'low'
      return 'broken'
    },
    
    // 获取信任等级文本
    getTrustLevelText() {
      const levels = {
        high: '高度信任',
        medium: '一般信任',
        low: '低度信任',
        broken: '信任破裂'
      }
      return levels[this.getTrustLevel()] || '未知'
    },
    
    // 获取信任等级样式类
    getTrustLevelClass() {
      return `trust-${this.getTrustLevel()}`
    },
    
    // 获取信任影响样式类
    getTrustImpactClass(impact) {
      if (impact > 0) return 'positive'
      if (impact < 0) return 'negative'
      return 'neutral'
    },
    
    // 获取信任影响文本
    getTrustImpactText(impact) {
      if (impact > 0) return `+${impact}`
      if (impact < 0) return `${impact}`
      return '0'
    },
    
    // 获取要求图标
    getRequirementIcon(type) {
      const icons = {
        trustLevel: '💎',
        trustValue: '📊',
        previousChoice: '📝',
        item: '🎒'
      }
      return icons[type] || '❓'
    },
    
    // 获取要求文本
    getRequirementText(requirement) {
      switch (requirement.type) {
        case 'trustLevel':
          return `信任等级: ${requirement.value}`
        case 'trustValue':
          return `信任值: ${requirement.value}`
        case 'previousChoice':
          return `需要选择: ${requirement.choiceName}`
        case 'item':
          return `需要物品: ${requirement.itemName}`
        default:
          return requirement.description || '未知要求'
      }
    },
    
    // 检查是否有之前的选择
    hasPreviousChoice(choiceId) {
      return this.storyHistory.some(entry => entry.branch.id === choiceId)
    },
    
    // 检查是否有物品
    hasItem(itemId) {
      // 这里应该检查玩家的物品库存
      return false
    },
    
    // 继续剧情
    continueStory() {
      if (this.showResult) {
        this.nextStep()
        return
      }
      
      if (this.selectedBranch) {
        this.processBranchResult()
      } else {
        this.nextStep()
      }
    },
    
    // 处理分支结果
    processBranchResult() {
      const selectedBranch = this.currentStory.branches.find(b => b.id === this.selectedBranch)
      if (!selectedBranch) return
      
      // 更新信任值
      this.currentTrustValue = Math.max(0, Math.min(100, this.currentTrustValue + selectedBranch.trustImpact))
      
      // 显示结果
      this.resultData = {
        title: selectedBranch.resultTitle || '选择结果',
        content: selectedBranch.resultContent || '你的选择产生了影响...',
        effects: this.getBranchEffects(selectedBranch)
      }
      
      this.showResult = true
      
      // 触发分支结果事件
      this.$emit('branch-result', {
        branch: selectedBranch,
        trustChange: selectedBranch.trustImpact,
        newTrustValue: this.currentTrustValue
      })
    },
    
    // 获取分支效果
    getBranchEffects(branch) {
      const effects = []
      
      if (branch.trustImpact > 0) {
        effects.push({
          id: 'trust_increase',
          icon: '📈',
          description: `信任值增加 ${branch.trustImpact}`
        })
      } else if (branch.trustImpact < 0) {
        effects.push({
          id: 'trust_decrease',
          icon: '📉',
          description: `信任值减少 ${Math.abs(branch.trustImpact)}`
        })
      }
      
      if (branch.specialEffects) {
        effects.push(...branch.specialEffects)
      }
      
      return effects
    },
    
    // 下一步
    nextStep() {
      if (this.currentStep < this.totalSteps) {
        this.currentStep++
        this.loadCurrentStory()
        this.showResult = false
      } else {
        this.completeStory()
      }
    },
    
    // 完成剧情
    completeStory() {
      this.showRestartButton = true
      
      this.$emit('story-complete', {
        finalTrustValue: this.currentTrustValue,
        storyHistory: this.storyHistory
      })
    },
    
    // 重新开始剧情
    restartStory() {
      this.initializeStory()
      this.showRestartButton = false
      
      this.$emit('story-restart')
    },
    
    // 获取继续按钮文本
    getContinueText() {
      if (this.showResult) {
        return this.currentStep < this.totalSteps ? '继续' : '完成'
      }
      if (this.currentStory.branches && this.currentStory.branches.length > 0) {
        return '确认选择'
      }
      return '继续'
    }
  }
}
</script>

<style scoped>
.trust-branch-story {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20rpx;
  color: white;
}

/* 剧情头部 */
.story-header {
  text-align: center;
  margin-bottom: 30rpx;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20rpx;
  padding: 30rpx;
  backdrop-filter: blur(10rpx);
}

.story-title {
  font-size: 36rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 8rpx;
}

.story-subtitle {
  font-size: 24rpx;
  opacity: 0.8;
}

/* 剧情内容 */
.story-content {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.1);
}

.story-text {
  margin-bottom: 20rpx;
}

.story-paragraph {
  font-size: 28rpx;
  line-height: 1.6;
  color: #333;
}

/* 剧情角色 */
.story-character {
  display: flex;
  align-items: center;
  gap: 16rpx;
  padding: 20rpx;
  background: #f8f9fa;
  border-radius: 12rpx;
}

.character-avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background: #667eea;
  display: flex;
  align-items: center;
  justify-content: center;
}

.character-icon {
  font-size: 32rpx;
}

.character-info {
  flex: 1;
}

.character-name {
  font-size: 24rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 4rpx;
}

.character-desc {
  font-size: 20rpx;
  color: #666;
}

/* 信任分支 */
.trust-branches {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.1);
}

.branches-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 20rpx;
  text-align: center;
}

.branches-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.branch-item {
  border: 2rpx solid #e0e0e0;
  border-radius: 12rpx;
  padding: 20rpx;
  cursor: pointer;
  transition: all 0.3s ease;
  background: white;
}

.branch-item:hover {
  border-color: #667eea;
  transform: translateY(-2rpx);
  box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.2);
}

.branch-item.selected {
  border-color: #667eea;
  background: rgba(102, 126, 234, 0.1);
  box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.3);
}

.branch-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #f5f5f5;
}

.branch-header {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
}

.branch-icon {
  font-size: 32rpx;
  margin-right: 12rpx;
}

.branch-title {
  flex: 1;
  font-size: 24rpx;
  font-weight: bold;
  color: #333;
}

.branch-trust-impact {
  padding: 4rpx 8rpx;
  border-radius: 6rpx;
  font-size: 18rpx;
  font-weight: bold;
}

.branch-trust-impact.positive {
  background: #e8f5e8;
  color: #4caf50;
}

.branch-trust-impact.negative {
  background: #ffeaea;
  color: #f44336;
}

.branch-trust-impact.neutral {
  background: #f0f0f0;
  color: #666;
}

.impact-text {
  font-size: 16rpx;
}

.branch-content {
  margin-bottom: 12rpx;
}

.branch-description {
  font-size: 20rpx;
  color: #666;
  line-height: 1.4;
}

.branch-requirements {
  border-top: 1rpx solid #e0e0e0;
  padding-top: 12rpx;
}

.requirements-title {
  font-size: 18rpx;
  color: #999;
  display: block;
  margin-bottom: 8rpx;
}

.requirements-list {
  display: flex;
  flex-direction: column;
  gap: 4rpx;
}

.requirement-item {
  display: flex;
  align-items: center;
  gap: 8rpx;
  font-size: 16rpx;
}

.requirement-item.satisfied {
  color: #4caf50;
}

.requirement-item:not(.satisfied) {
  color: #f44336;
}

.requirement-icon {
  font-size: 14rpx;
}

.requirement-text {
  font-size: 14rpx;
}

/* 剧情结果 */
.story-result {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.1);
  animation: resultSlideIn 0.5s ease-out;
}

.result-content {
  text-align: center;
}

.result-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 12rpx;
}

.result-text {
  font-size: 24rpx;
  color: #666;
  line-height: 1.4;
  margin-bottom: 20rpx;
}

.result-effects {
  border-top: 1rpx solid #e0e0e0;
  padding-top: 20rpx;
}

.effects-title {
  font-size: 22rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 12rpx;
}

.effects-list {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.effect-item {
  display: flex;
  align-items: center;
  gap: 8rpx;
  padding: 8rpx 12rpx;
  background: #f8f9fa;
  border-radius: 8rpx;
}

.effect-icon {
  font-size: 18rpx;
}

.effect-text {
  font-size: 18rpx;
  color: #333;
}

/* 剧情进度 */
.story-progress {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12rpx;
  padding: 16rpx;
  margin-bottom: 30rpx;
  backdrop-filter: blur(10rpx);
}

.progress-bar {
  width: 100%;
  height: 8rpx;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4rpx;
  overflow: hidden;
  margin-bottom: 8rpx;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4caf50, #8bc34a);
  border-radius: 4rpx;
  transition: width 0.5s ease;
}

.progress-text {
  font-size: 20rpx;
  color: white;
  text-align: center;
  display: block;
}

/* 操作按钮 */
.story-actions {
  display: flex;
  gap: 16rpx;
  margin-bottom: 30rpx;
}

.action-btn {
  flex: 1;
  padding: 16rpx 24rpx;
  border: none;
  border-radius: 12rpx;
  font-size: 24rpx;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.action-btn.continue {
  background: linear-gradient(135deg, #4caf50, #8bc34a);
  color: white;
  box-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.3);
}

.action-btn.continue:hover {
  transform: translateY(-2rpx);
  box-shadow: 0 6rpx 16rpx rgba(76, 175, 80, 0.4);
}

.action-btn.continue:disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.action-btn.restart {
  background: linear-gradient(135deg, #ff9800, #ffc107);
  color: white;
  box-shadow: 0 4rpx 12rpx rgba(255, 152, 0, 0.3);
}

.action-btn.restart:hover {
  transform: translateY(-2rpx);
  box-shadow: 0 6rpx 16rpx rgba(255, 152, 0, 0.4);
}

.btn-text {
  font-size: 22rpx;
}

/* 信任状态显示 */
.trust-status-display {
  display: flex;
  gap: 16rpx;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12rpx;
  padding: 16rpx;
  backdrop-filter: blur(10rpx);
}

.status-item {
  flex: 1;
  text-align: center;
}

.status-label {
  font-size: 18rpx;
  color: rgba(255, 255, 255, 0.8);
  display: block;
  margin-bottom: 4rpx;
}

.status-value {
  font-size: 24rpx;
  font-weight: bold;
  color: white;
}

.status-value.trust-high {
  color: #4caf50;
}

.status-value.trust-medium {
  color: #ff9800;
}

.status-value.trust-low {
  color: #ff5722;
}

.status-value.trust-broken {
  color: #f44336;
}

/* 动画效果 */
@keyframes resultSlideIn {
  0% {
    opacity: 0;
    transform: translateY(20rpx);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 768rpx) {
  .trust-branch-story {
    padding: 16rpx;
  }
  
  .story-content,
  .trust-branches,
  .story-result {
    padding: 24rpx;
  }
  
  .story-actions {
    flex-direction: column;
  }
  
  .trust-status-display {
    flex-direction: column;
    gap: 12rpx;
  }
}
</style>

